<template>
	<view v-if="detail">
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in banner">
				<view class="swiper-item">
					<image :src="item" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="text-center padding-tb">
			<view class="text-xl">
				{{detail.name}}
			</view>
			<view class="text-md">
				{{detail.french}}
			</view>
		</view>
		<view class="flex justify-around">
			<view  
				v-for="(item,index) in detail.list" 
				class="text-center padding-sm tab"
				:class="{active:index==tabIdx}"
				@click="tabIdx=index"
			>
				<view class="">{{item.spec}}</view>
				<view class="">{{item.weight}}</view>
				<view class="">{{item.edible}}</view>
			</view>
		</view>
		<view class="padding fs-28 u-border-bottom">
			￥{{detail.list[tabIdx].price}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			
			<text class="margin-lr">{{detail.list[tabIdx].size}}</text>
			<text class="margin-lr">{{detail.list[tabIdx].fittings}}</text>
			
		</view>
		<view class="padding fs-28 u-border-bottom">
			
		</view>
		<view class="flex justify-around fixed padding-tb-sm">
			<button class="cu-btn bg-brown lg" type="default">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view>
	</view>
</template>

<script setup>
// 提取路由参数
import {onLoad} from '@dcloudio/uni-app'
import { computed, reactive, ref } from "vue";
import { cakeDetailGet } from '../../api/cake';
const detail = ref()
const tabIdx = ref(0)
onLoad(({id})=>{
	cakeDetailGet(id).then(res=>{
		console.log(res);
		detail.value = res.data
	})
})
const banner = computed(()=>{
	if(!detail.value) return
	let {list,url} = detail.value.list[tabIdx.value].pic
	return list.map(item=>{
		return `${url}${item.m}` 
	})
})
</script>

<style lang="scss">
.banner{
	height: 600upx;
	swiper-item{
		height: 600upx;
	}
	image{
		width: 100%;
		// height: 600upx;
	}
}
.tab{
	&.active{
		background-color: #fae456;
	}
}
.cu-btn.lg{
	width: 46%;
}
</style>
